<template>
	<view class="content">
		<view class="content-box">
			<view class="item-box-ng" v-for="(item, index) in bankCardList"  hover-class="navigator-hover">
				<view :class="['back','item-bank-box']">
					<image :src="((index+1) % 4) == 1 ? img1 : (
					((index+1) % 4) == 2 ? img2 : (
					((index+1) % 4) == 3 ? img3 : (
					img4)))"></image>
					
					<view class="cph name">
						<image :src="((index+1) % 4) == 1 ? imgIcon1 : (
					((index+1) % 4) == 2 ? imgIcon2 : (
					((index+1) % 4) == 3 ? imgIcon3 : (
					imgIcon4)))" class="card-icon"></image>
						{{ item.bankName }}
					</view>
					<view class="cph cph-no">{{ '**** **** **** '+item.cardNumber.slice(-4) }}</view>
				</view>
			</view>
			<uni-load-more :status="pageParams.isMore" />
		</view>
		<view class="btns">
			<button type="primary" @click="addCard">添加</button>
		</view>
	</view>

</template>
<script>
import { getListsPage } from '@/api/system/bank.js';
import config from '@/config'
export default {
  data() {
	  return {
	  	bankCardList: [],
	  	queryParam: {
	  		pageNo: 1,
	  		pageSize: 10
	  	},
		pageParams: {
			isMore: 'more'
		}
	  };
    },
  onShow() {
  	this.bankCardList = []
  	this.getList();
  },
  computed:{
  	img1(){
  		return config.baseImgUrl + '/card1.png'
  	},
  	img2(){
  		return config.baseImgUrl + '/card2.png'
  	},
	img3(){
		return config.baseImgUrl + '/card3.png'
	},
	img4(){
		return config.baseImgUrl + '/card4.png'
	},
	imgIcon1(){
		return config.baseImgUrl + '/cardi1.png'
	},
	imgIcon2(){
		return config.baseImgUrl + '/cardi2.png'
	},
	imgIcon3(){
		return config.baseImgUrl + '/cardi3.png'
	},
	imgIcon4(){
		return config.baseImgUrl + '/cardi4.png'
	}
  },
  onPullDownRefresh() {
  	this.queryParam.pageNo = 1;
	this.pageParams.isMore = 'more';
  	this.bankCardList = [];
  	this.getList();
  },
  onReachBottom() {
  	console.log('onReachBottom~~');
  	if (this.pageParams.isMore == 'more') {
  		this.queryParam.pageNo++;
  		this.getList();
  	}
  	console.log('onReachBottom');
  },
  methods: {
    addCard() {
    	uni.navigateTo({
    		url: '/packageB/pages/mine/bank-card/band-card-add'
    	});
    },
	//获取银行卡列表
	async getList() {
		try {
			let res = await getListsPage(this.queryParam);
			console.log('getCard: ', res);
			if (res.code == 0) {
				console.log('getCard: ', res);
				this.bankCardList = [...this.bankCardList, ...res.data.list];
				if (res.data.total == this.bankCardList.length) {
					this.pageParams.isMore = 'noMore';
				} else {
					this.pageParams.isMore = 'more';
				}
			}
			//停止下拉刷新
			wx.hideNavigationBarLoading();
			//停止下拉刷新
			wx.stopPullDownRefresh();
		} catch (e) {
			console.log('getCard: ', e);
			return false;
		}
	}
  }
};
</script>
<style lang="scss" scoped>
.content-box{
	.item-box-ng {
	  margin-top: 15rpx;
	}
	
	.item-bank-box{
		border-radius: 5px;
		height: 200rpx;
		color: #fff;
		width: 100%;
		font-size: 35.55rpx;
		.cph {
		   height: 80rpx;
		   line-height: 80rpx;
		   position: relative;
		   left: 40rpx;
		   top: 25rpx;
		}
		.cph.name {
		   text-indent: -9rpx;
		   font-weight: bold;
		   position: relative;
		   left: 40rpx;
		   top: 18rpx;
		}
		.cph-no {
		   letter-spacing: 19rpx;
		   width: 100%;
		}
		.card-icon{
			width: 60rpx;
			height: 60rpx;
			position: relative;
			top: 20rpx;
		}
	}
}
.btn{
	padding: 20rpx;
	position: fixed;
}
</style>
